Setup
Add IDs to the Bubble groups you want to control, then point the splitter element at those pane and gutter IDs. Each splitter expects a dedicated wrapper structure so it can manage sizing cleanly.

For Split Pane Gutter, place the gutter element directly between two pane groups inside a dedicated wrapper group. Use horizontal orientation for left/right resizing and vertical orientation for top/bottom resizing. For three-pane layouts, place two gutter elements in the same wrapper: left pane, gutter, center pane, gutter, right pane. Set the left/top gutter Anchor Pane to Previous, and set the right/bottom gutter Anchor Pane to Next. This keeps the middle pane flexible while the edge panes keep explicit sizes. The gutter can infer adjacent panes from sibling order, or you can provide explicit wrapper and pane IDs. Set pane width, height, and min/max constraints directly on the Bubble pane groups; the gutter reads those computed element sizes at runtime instead of duplicating sizing fields in the plugin.

For Floating Group Resizer, add an HTML ID to the Floating Group and point the element at that ID. The resizer infers whether the floating group is attached to the left or right side of the viewport, injects the drag handle on the inner edge, respects computed min/max width when Bubble exposes them, clamps to the viewport, and remembers the user's resized width in localStorage.

For Modal Resizer, add an HTML ID to the Bubble popup or modal group and point the element at that ID. The element injects handles on all four sides and all four corners. Enable Drag Move to let users drag the modal around the viewport. For the cleanest drag behavior, set Drag Handle ID to a header group inside the modal; otherwise Drag From Whole Modal lets non-interactive modal content move the modal. Use min/max size fields and Keep Within Viewport to control bounds. Enable Remember Size And Position when the user's resized modal dimensions and moved position should persist in localStorage.